cascading style sheets reference

בוררי מעמד

הסבר

השליטה בעיצוב הדף, אשר מאפשרים לכם בוררי אלמנטים של HTML, היא מרגשת, אך היא יכולה להיות גם מסובכת. זה נהדר אם אפשר לשנות את כל הפסקאות, אך מה אם ברצונכם לשנות רק פיסקה אחת או רק כמה פסקאות? בעזרת HTML הייתם מוסיפים רק את סימון המראה עבור הטקסט שאותו אתם רוצים לשנות בלבד. בגישת דף הסגנון זה בלתי אפשרי, אז כיצד נוכל להשיג את התוצאה הרצויה?

הבה נחשוב על סיבה מדוע תרצו שפיסקה מסוימת תיראה שונה מפסקאות אחרות בדף. זה ככל הנראה כיוון שתוכן הפסקה הוא שונה בדרך כלשהי מפסקאות אחרות בדף.
חשבו על דף שאלות ותשובות. אתם יכולים ליצור את השאלה בהדגשה, כאשר התשובות הן בטקסט רגיל. מראה הפסקה הוא פונקציה של תוכן הפסקה.

בעזרת CSS-ים אתם יכולים ליצור בוררים הקשורים לסוג או מעמד ספציפי של אלמנט. בדוגמא למעלה אנו נזהה שני מעמדות של פיסקהשאלה ותשובה. אחר כך ניצור שתי הצהרות בדף הסגנון שלנו, אחת המשפיעה רק על פסקאות ממעמד שאלה, ואחת שמשפיעה רק על פסקאות ממעמד תשובה.

בקיצור, בורר מעמד מעמד בוחר אלמנט כלשהו ממעמד נתון.

אתם בוודאי תוהים מה כוונתי במעמד. אני אסביר זאת בקרוב.

תחביר

קיימות שתי צורות של בורר המעמד.

הסוג הראשון של בורר המעמד בוחר כל סוג של אלמנט ממעמד מסוים (כך שהוא יבחר גם פסקאות וגם טבלאות ממעמד זה, כמו כן, כל אלמנט אחר בעל אותו מעמד).

בדף הסגנון הצורה של סוג זה של בורר מעמד היא פשוטה: class-name.
,זאת אומרת, נקודה, שאחריה בא שם המעמד.
בדוגמא למעלה, של שאלה ותשובה, אנו ניצור שני בוררי מעמד באופן זה :

.question {font-weight: bold}
.answer {font-weight: 400}

הראשון מבין בוררים אלה בוחר כל אלמנט שהוא בדף, בעל מעמד "question". השני מביניהם בוחר אלמנט כלשהו בדף, בעל מעמד "answer".

הסוג השני של בורר המעמד בוחר רק סוג ספציפי של אלמנט ממעמד מסוים - למשל, הוא יבחר רק פסקאות ממעמד זה, ולא טבלאות או כל אלמנט אחר ממעמד זה. הצורה של סוג זה של בורר היא:
element.class-name, זאת אומרת, שם האלמנט שאחריו נקודה, ואז שם המעמד.
בדוגמא למעלה, של שאלה ותשובה, אנו ניצור בוררי מעמד ספציפיים של פסקאות, כמו זו:

P.question {font-weight: bold}
P.answer {font-weight: 400}

הראשון מבין בוררים אלה בוחר פסקאות ממעמד "question"בלבד. הוא לא בוחר כל אלמנט אחר ממעמד "question", ", והוא לא בוחר פסקאות, חוץ מאלה ממעמד "question". השני מבין בוררים אלה בוחר רק פסקאות ממעמד "answer", ולא פסקאות אחרות או אלמנטים אחרים ממעמד "answer".

שימו לב שמעמד מורכב רק מתווים אלפא-נומריים וממקפים. הם אינם יכולים לכלול מקף תחתון ותווים אחרים, כמו גם רווחים. מעמד לא יכול להתחיל במספר.

שימוש

ראינו בהסבר למעלה שאנו משתמשים בבוררי מעמד כדי לתת מראה מסוים לחלקים ספציפיים של הדף.

בשיעור המעשי, ייתכן ולהסברים שלנו יהיה מראה שונה מההליכים.
בספר בישול, רשימת המצרכים תהיה בעלת מראה שונה מאשר הוראות הבישול.

במקרה הראשון, אנו ניצור בוררי מעמד ".explanation" ו- ".procedure", או אם כל ההסברים וההליכים יהיו בפסקאות, "p.explanation" ו- "p.procedure".

עבור ספר בישול, יהיו לנו בוררי מעמד ".ingredients" ו- ".instructions". אם המצרכים מופיעים ברשימה, אנו יכולים ליצור בורר מעמד של פריט רשימה: "LI.ingredients".

כל מה שנשאר הוא לענות תשובה לשאלה המעצבנת "למה אתה מתכוון באלמנט ממעמד נתון? " מה היא בדיוק פיסקה של מעמד "explanation"? שאלה טובה מאוד.

HTML 4.0, ההמלצה האחרונה של W3C, או HTML סטנדרטי מציג תכונה עבור אלמנטים של HTML, תכונת המעמד. הפורמט של תכונה זו הוא כדלקמן. במסמך ה-HTML, כדי ליצור פיסקה ממעמד "instruction", אתם יוצרים פיסקה כרגיל בעזרת התווים: <P></P>. בנוסף, אתם מוסיפים את תכונת המעמד לתווית הפתיחה, כפי שהייתם מוסיפים כל תכונה אחרת : < P class=instruction > . כל הפסקאות בדף המסומנות בדרך זו ייבחרו על ידי אחד מתוך הבוררים האלה: P.instruction or .instruction.

השיעור המעשי שלנו מציג שיעור מפורט, צעד אחר צעד, אודות כיצד ולמה להשתמש בבוררי מעמד בדפי האתר שלכם.

בוררי מעמד הם באמת הם באמת אחד מהרעיונות הקשים ביותר בדפי הסגנון. אם הגעתם עד הלום, ויש לכם תחושה לגבי 1) מדוע הם בעלי ערך? 2) מתי תשתמשו בהם ? 3) כיצד להשתמש בהם (גם אם שכחתם את הפרטים)? , אז הצלחתם.
אם אתם עדיין נאבקים קצת, אולי עליכם להמשיך הלאה מבלי לדאוג יותר מדיי, ותחזרו לחלק זה מאוחר יותר. אתם תבינו את זה.